<template>
  <div>
    <div class="container-fluid">
      <div class="container">
        <header class="row no-gutters">
          <div class="logo_jianji col-md-2 col-sm-8 offset-sm-5 offset-md-0">
            <img
              src="https://qnm.hunliji.com/Foi1vAfd5hiJdm66_Cayx-1QqZz2"
              alt=""
            />
          </div>
          <div class="nav row col-md-8 col-sm-12">
            <ul class="nav_content col-sm-8 offset-sm-3 h4 font-weight-bold">
              <li
                class="mx-xl-3 mx-md-2 mx-sm-3"
                :class="{ active1: i_chose == 0 }"
                @click="getVedio(0)"
              >
                <a href="#">推荐</a>
              </li>
              <li
                class="mx-xl-3 mx-md-2 mx-sm-3"
                :class="{ active1: i_chose == 1 }"
                @click="getVedio(1)"
              >
                <a href="#">婚礼</a>
              </li>
              <li
                class="mx-xl-3 mx-md-2 mx-sm-3"
                :class="{ active1: i_chose == 2 }"
                @click="getVedio(2)"
              >
                <a href="#">儿童时光</a>
              </li>
            </ul>
          </div>
          <div class="login_btn mt-3 col-md-2 col-sm-4 offset-sm-3 offset-md-0">
            <div class="btn">登录</div>
          </div>
        </header>
      </div>
    </div>
    <div class="container-fluid">
      <div class="container">
        <div class="row no-gutters">
          <!-- 遍历盒子 -->
          <div
            class="vedio_box row no-gutters col-xl-3 col-md-6 col-xs-12"
            v-for="(item, i) of vedio"
            :key="i"
            @click="close_vedio(1, item.big_pic, item.vedio_link)"
          >
            <!-- 图片 -->
            <div class="top">
              <img :src="item.small_pic" />
              <div class="bot">
                <p>
                  {{ item.title }}
                </p>
                <p>{{ item.sub_title }}</p>
                <div class="displaynone">
                  <div>立即制作</div>
                  <a href="">详情 ></a>
                </div>
              </div>
            </div>
            <!-- 信息 -->
          </div>
          <!-- 遍历结束 -->
        </div>
      </div>
    </div>
    <div class="vedio_fixed" v-show="is_close == 1">
      <div class="close_icon" @click="close_vedio(0, null, null)"></div>
      <p class="vedio_title">小小宇宙梦宝宝视频素材</p>
      <div class="video-content">
        <video
          :poster="poster_pic"
          controls
          :src="source"
          width="960"
          height="540"
        >
          <source />
          您的浏览器不支持 video 标签。
        </video>
        <div class="other_info">
          <p>等待时间-启动阿萨德</p>
          <p>等待时间-启动阿萨德</p>
          <a href="" class="make_imd">立即制作 →</a>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      vedio: [], //存放请求回来的数据
      i_chose: 0, //哪一种类被选中
      is_close: 0, //是否打开视频播放器
      poster_pic: "", // 当前视频播放封面图片
      source: "", // 当前视频播放视频源
    };
  },
  mounted() {
    // 页面加载时请求推荐页面
    this.getVedio(0);
  },
  methods: {
    // 请求数据的方法
    getVedio(type) {
      //type取值：0推荐 1婚礼 2亲自
      this.axios(`/vedio/show/${type}`).then((res) => {
        this.vedio = res.data;
      });
      // 改变字体和下边框
      this.i_chose = type;
    },
    // 关闭大视频窗口
    close_vedio(n, poster, source) {
      this.is_close = n;
      this.poster_pic = poster;
      this.source = source;
      console.log(poster, source);
    },
  },
};
</script>
<style scoped>
@import url(/css/bootstrap.css);
header {
  min-height: 85px;
}
a:hover {
  color: #fa254b;
  text-decoration: none;
}

a {
  color: #000;
}

/* 配置好页面颜色 */
.container-fluid:nth-child(1) {
  background-color: #fff;
  /* height: 68px; */
  line-height: 68px;
}

.container-fluid:nth-child(2) {
  background-image: linear-gradient(to bottom, #f6f6f6, #fff);
  margin-bottom: 100px;
}

/* logo的大小 */
.log_jiantou {
  height: 30px;
}

.logo_jianji > img {
  height: 30px;
}

/* 导航 */
ul.nav_content {
  list-style: none;
  text-align: center;
  height: 68px;
  line-height: 68px;
}

ul.nav_content li {
  float: left;
  height: 68px;
  box-sizing: border-box;
}

/* ul.nav_content li:nth-child(1) {
  border-bottom: 3px solid #fa254b;
} */
.active1 {
  border-bottom: 3px solid #fa254b;
}
.active1 a {
  color: #fa254b;
}

/* 重写btn登录 */
.login_btn .btn {
  width: 90px;
  height: 40px;
  color: #fff;
  line-height: 25px;
  text-align: center;
  background: linear-gradient(45deg, #ff506f 0%, #ff60b0 100%);
  /* -webkit-box-shadow: 0px 8px 12px rgb(255 80 111 / 20%); */
  box-shadow: 0px 8px 12px rgb(255 80 111 / 20%);
  border-radius: 100px;
  font-size: 14px;
  float: right;
}

/* 视频展示 */
.vedio_box {
  box-sizing: border-box;
  margin-top: 20px;
  /* background-color: pink; */
  cursor: pointer;
}

.vedio_box > div:nth-child(1) {
  height: 100%;
  width: 100%;
  /* background-color: skyblue; */
  margin: 0 10px;
}
.vedio_box > div img {
  width: 100%;
}
.vedio_box div.bot {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  position: relative;
}
.vedio_box div.bot p:nth-child(1) {
  color: #000;
}
.vedio_box div.bot p {
  white-space: nowrap;
  color: #666;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0;
  font-size: 14px;
}
.vedio_box div.bot .displaynone {
  position: absolute;
  width: 35%;
  height: 100%;
  /* background-color: #ccc; */
  right: 10px;
  bottom: 0;
  text-align: center;
  font-size: 14px;
  display: none;
}
.vedio_box div.bot .displaynone div {
  font-size: 12px;
  color: #fff;
  background-color: #ff76b1;
  border-radius: 99px;
  text-align: center;
  height: 25px;
  line-height: 25px;
  margin-top: 15px;
}
.vedio_box div.bot:hover {
  padding-right: 35%;
}
.vedio_box div.bot:hover .displaynone {
  display: block;
}
.vedio_fixed {
  width: 1200px;
  height: 633px;
  background-color: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-shadow: 0 0 1px 1px #ccc;
  padding: 24px;
  font-size: 14px;
}
.vedio_fixed .close_icon {
  position: absolute;
  font-family: "icomoon";
  font-size: 36px;
  right: 10px;
  top: 0;
  cursor: pointer;
}
.vedio_fixed .vedio_title {
  font-size: 24px;
  color: #000;
  font-weight: bold;
  margin-bottom: 15px;
  max-width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vedio_fixed .close_icon:hover {
  color: #fa254b;
}
/* 视频 */
.vedio_fixed .video-content {
  width: 1152px;
  height: 528px;
  /* background-color: skyblue; */
}
.vedio_fixed .video-content .other_info {
  width: 192px;
  height: 540px;
  float: right;
  background-color: #fff;
}
.vedio_fixed .video-content .other_info p {
  margin-bottom: 20px;
  height: 20px;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.vedio_fixed .video-content .other_info p::before {
  content: "";
  font-family: "icomoon";
  color: #ff60b0;
  vertical-align: middle;
}
.vedio_fixed .video-content .other_info a {
  display: block;
  width: 200px;
  height: 48px;
  color: #fff;
  text-align: center;
  line-height: 48px;
  background-image: linear-gradient(45deg, #ff506f 0%, #ff60b0 100%);
  /* -webkit-box-shadow: 0px 16px 24px rgb(233 198 204 / 20%); */
  box-shadow: 0px 16px 24px rgb(233 198 204 / 20%);
  border-radius: 24px;
  cursor: pointer;
  margin-top: 50px;
}
</style>